<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="header-content">
        <view class="back-button" @click="goBack">
          <text class="fas fa-arrow-left back-icon"></text>
        </view>
        <text class="header-title">订单管理</text>
        <view class="filter-button" @click="showFilterModal">
          <text class="fas fa-filter filter-icon"></text>
          <view v-if="hasActiveFilters" class="filter-indicator"></view>
        </view>
      </view>
    </view>

    <!-- Tab Navigation -->
    <view class="tab-section">
      <scroll-view class="tab-scroll" scroll-x="true">
        <view class="tab-container">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['tab-button', currentTab === tab.key ? 'tab-active' : 'tab-inactive']"
            @click="switchTab(tab.key)"
          >
            <text>{{ tab.label }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- Order List -->
    <scroll-view class="order-list" scroll-y="true">
      <!-- All Orders Tab -->
      <view v-if="currentTab === 'all'" class="tab-content">
        <view
          v-for="(order, index) in allOrders"
          :key="index"
          class="order-item"
        >
          <view class="order-header">
            <view class="order-info">
              <text class="order-number">订单号: {{ order.orderNumber }}</text>
              <view :class="['status-badge', getStatusClass(order.status)]">
                <text>{{ getStatusText(order.status) }}</text>
              </view>
            </view>
            <text class="order-time">{{ order.createTime }}</text>
          </view>

          <view class="order-content">
            <view class="product-info">
              <image :src="order.product.image" class="product-image" mode="aspectFill"></image>
              <view class="product-details">
                <text class="product-name">{{ order.product.name }}</text>
                <text class="product-spec">{{ order.product.spec }}</text>
                <text class="product-price">¥{{ order.product.price }}</text>
              </view>
            </view>

            <view class="order-footer">
              <view class="customer-info">
                <text class="customer-name">买家: {{ order.customer.name }}</text>
                <text :class="['customer-extra', getCustomerExtraClass(order.status)]">
                  {{ getCustomerExtra(order) }}
                </text>
              </view>
              <view class="action-buttons">
                <text class="detail-button" @click="viewOrderDetail(order.orderNumber)">
                  查看详情
                </text>
                <text
                  :class="[getActionButtonClass(order.status)]"
                  @click="handleOrderAction(order)"
                >
                  {{ getActionButtonText(order.status) }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Pending Orders Tab -->
      <view v-if="currentTab === 'pending'" class="tab-content">
        <view
          v-for="(order, index) in pendingOrders"
          :key="index"
          class="order-item"
        >
          <view class="order-header">
            <view class="order-info">
              <text class="order-number">订单号: {{ order.orderNumber }}</text>
              <view class="status-badge pending-badge">
                <text>待发货</text>
              </view>
            </view>
            <text class="order-time">{{ order.createTime }}</text>
          </view>

          <view class="order-content">
            <view class="product-info">
              <image :src="order.product.image" class="product-image" mode="aspectFill"></image>
              <view class="product-details">
                <text class="product-name">{{ order.product.name }}</text>
                <text class="product-spec">{{ order.product.spec }}</text>
                <text class="product-price">¥{{ order.product.price }}</text>
              </view>
            </view>

            <view class="order-footer">
              <view class="customer-info">
                <text class="customer-name">买家: {{ order.customer.name }}</text>
                <text class="customer-address">地址: {{ order.customer.address }}</text>
              </view>
              <view class="action-buttons">
                <text class="detail-button" @click="viewOrderDetail(order.orderNumber)">
                  查看详情
                </text>
                <text class="ship-button" @click="shipOrder(order.orderNumber)">
                  立即发货
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Unpaid Orders Tab -->
      <view v-if="currentTab === 'unpaid'" class="tab-content">
        <view
          v-for="(order, index) in unpaidOrders"
          :key="index"
          class="order-item"
        >
          <view class="order-header">
            <view class="order-info">
              <text class="order-number">订单号: {{ order.orderNumber }}</text>
              <view class="status-badge unpaid-badge">
                <text>待付款</text>
              </view>
            </view>
            <text class="order-time">{{ order.createTime }}</text>
          </view>

          <view class="order-content">
            <view class="product-info">
              <image :src="order.product.image" class="product-image" mode="aspectFill"></image>
              <view class="product-details">
                <text class="product-name">{{ order.product.name }}</text>
                <text class="product-spec">{{ order.product.spec }}</text>
                <text class="product-price">¥{{ order.product.price }}</text>
              </view>
            </view>

            <view class="order-footer">
              <view class="customer-info">
                <text class="customer-name">买家: {{ order.customer.name }}</text>
                <text class="payment-reminder">剩余支付时间: {{ order.paymentTimeLeft }}</text>
              </view>
              <view class="action-buttons">
                <text class="detail-button" @click="viewOrderDetail(order.orderNumber)">
                  查看详情
                </text>
                <text class="remind-button" @click="remindPayment(order.orderNumber)">
                  提醒付款
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Shipped Orders Tab -->
      <view v-if="currentTab === 'shipped'" class="tab-content">
        <view
          v-for="(order, index) in shippedOrders"
          :key="index"
          class="order-item"
        >
          <view class="order-header">
            <view class="order-info">
              <text class="order-number">订单号: {{ order.orderNumber }}</text>
              <view class="status-badge shipped-badge">
                <text>已发货</text>
              </view>
            </view>
            <text class="order-time">{{ order.createTime }}</text>
          </view>

          <view class="order-content">
            <view class="product-info">
              <image :src="order.product.image" class="product-image" mode="aspectFill"></image>
              <view class="product-details">
                <text class="product-name">{{ order.product.name }}</text>
                <text class="product-spec">{{ order.product.spec }}</text>
                <text class="product-price">¥{{ order.product.price }}</text>
              </view>
            </view>

            <view class="order-footer">
              <view class="customer-info">
                <text class="customer-name">买家: {{ order.customer.name }}</text>
                <text class="logistics-info">快递: {{ order.logistics }}</text>
              </view>
              <view class="action-buttons">
                <text class="detail-button" @click="viewOrderDetail(order.orderNumber)">
                  查看详情
                </text>
                <text class="track-button" @click="trackOrder(order.orderNumber)">
                  查看物流
                </text>
                <text class="confirm-button" @click="confirmDelivery(order.orderNumber)">
                  确认收货
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Service Orders Tab -->
      <view v-if="currentTab === 'service'" class="tab-content">
        <view
          v-for="(order, index) in serviceOrders"
          :key="index"
          class="order-item"
        >
          <view class="order-header">
            <view class="order-info">
              <text class="order-number">订单号: {{ order.orderNumber }}</text>
              <view class="status-badge service-badge">
                <text>售后中</text>
              </view>
            </view>
            <text class="order-time">{{ order.createTime }}</text>
          </view>

          <view class="order-content">
            <view class="product-info">
              <image :src="order.product.image" class="product-image" mode="aspectFill"></image>
              <view class="product-details">
                <text class="product-name">{{ order.product.name }}</text>
                <text class="product-spec">{{ order.product.spec }}</text>
                <text class="product-price">¥{{ order.product.price }}</text>
              </view>
            </view>

            <view class="order-footer">
              <view class="customer-info">
                <text class="customer-name">买家: {{ order.customer.name }}</text>
                <text class="service-reason">申请原因: {{ order.serviceReason }}</text>
              </view>
              <view class="action-buttons">
                <text class="detail-button" @click="viewOrderDetail(order.orderNumber)">
                  查看详情
                </text>
                <text class="handle-button" @click="handleService(order.orderNumber)">
                  处理售后
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="list-bottom"></view>
    </scroll-view>

    <!-- Filter Modal -->
    <view v-if="showFilter" class="filter-modal" @click="hideFilterModal">
      <view class="filter-content" @click.stop>
        <view class="filter-header">
          <text class="filter-title">筛选订单</text>
          <view class="close-button" @click="hideFilterModal">
            <text class="fas fa-times close-icon"></text>
          </view>
        </view>

        <scroll-view class="filter-body" scroll-y="true">
          <!-- Order Status Filter -->
          <view class="filter-section">
            <text class="section-title">订单状态</text>
            <view class="checkbox-grid">
              <view
                v-for="(status, index) in statusOptions"
                :key="index"
                class="checkbox-item"
                @click="toggleStatusFilter(status.value)"
              >
                <view :class="['checkbox', selectedFilters.status.includes(status.value) ? 'checked' : '']">
                  <text v-if="selectedFilters.status.includes(status.value)" class="fas fa-check"></text>
                </view>
                <text class="checkbox-label">{{ status.label }}</text>
              </view>
            </view>
          </view>

          <!-- Time Range Filter -->
          <view class="filter-section">
            <text class="section-title">时间范围</text>
            <view class="time-buttons">
              <view
                v-for="(range, index) in timeRanges"
                :key="index"
                :class="['time-button', selectedTimeRange === range.value ? 'active' : '']"
                @click="selectTimeRange(range.value)"
              >
                <text>{{ range.label }}</text>
              </view>
            </view>
          </view>

          <!-- Order Amount Filter -->
          <view class="filter-section">
            <text class="section-title">订单金额</text>
            <view class="amount-buttons">
              <view
                v-for="(amount, index) in amountRanges"
                :key="index"
                :class="['amount-button', selectedAmountRange === amount.value ? 'active' : '']"
                @click="selectAmountRange(amount.value)"
              >
                <text>{{ amount.label }}</text>
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="filter-footer">
          <text class="reset-button" @click="resetFilters">重置</text>
          <text class="apply-button" @click="applyFilters">应用筛选</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'pending',
      showFilter: false,
      hasActiveFilters: false,
      selectedTimeRange: '',
      selectedAmountRange: '',

      tabs: [
        { key: 'all', label: '全部' },
        { key: 'pending', label: '待发货(12)' },
        { key: 'unpaid', label: '待付款(5)' },
        { key: 'shipped', label: '已发货(8)' },
        { key: 'service', label: '售后中(3)' }
      ],

      selectedFilters: {
        status: []
      },

      statusOptions: [
        { value: 'unpaid', label: '待付款' },
        { value: 'pending', label: '待发货' },
        { value: 'shipped', label: '已发货' },
        { value: 'completed', label: '已完成' },
        { value: 'cancelled', label: '已取消' },
        { value: 'refund', label: '退款中' }
      ],

      timeRanges: [
        { value: 'today', label: '今天' },
        { value: 'week', label: '最近7天' },
        { value: 'month', label: '最近30天' },
        { value: 'quarter', label: '最近3个月' }
      ],

      amountRanges: [
        { value: '0-100', label: '≤100元' },
        { value: '100-500', label: '100-500元' },
        { value: '500+', label: '≥500元' }
      ],

      // Sample data for all orders
      allOrders: [
        {
          orderNumber: '202501050001',
          status: 'pending',
          createTime: '2025-01-05 10:32',
          product: {
            name: '无线蓝牙耳机 Pro Max',
            spec: '颜色: 黑色 | 数量: 2',
            price: '598',
            image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop'
          },
          customer: {
            name: '张先生',
            address: '北京市朝阳区...'
          }
        },
        {
          orderNumber: '202501050003',
          status: 'unpaid',
          createTime: '2025-01-05 12:20',
          product: {
            name: '便携充电宝 20000mAh',
            spec: '颜色: 白色 | 数量: 3',
            price: '267',
            image: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=60&h=60&fit=crop'
          },
          customer: {
            name: '王先生'
          },
          paymentTimeLeft: '23:45:30'
        },
        {
          orderNumber: '202501050004',
          status: 'shipped',
          createTime: '2025-01-04 15:30',
          product: {
            name: '无线键盘鼠标套装',
            spec: '颜色: 黑色 | 数量: 1',
            price: '159',
            image: 'https://images.unsplash.com/photo-1585298723682-7115561c51b7?w=60&h=60&fit=crop'
          },
          customer: {
            name: '赵女士'
          },
          logistics: '顺丰速运 SF1234567890'
        },
        {
          orderNumber: '202501040008',
          status: 'service',
          createTime: '2025-01-04 09:15',
          product: {
            name: '蓝牙音箱运动版',
            spec: '颜色: 蓝色 | 数量: 1',
            price: '299',
            image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=60&h=60&fit=crop'
          },
          customer: {
            name: '刘先生'
          },
          serviceReason: '商品质量问题'
        }
      ],

      pendingOrders: [
        {
          orderNumber: '202501050001',
          createTime: '2025-01-05 10:32',
          product: {
            name: '无线蓝牙耳机 Pro Max',
            spec: '颜色: 黑色 | 数量: 2',
            price: '598',
            image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop'
          },
          customer: {
            name: '张先生',
            address: '北京市朝阳区...'
          }
        },
        {
          orderNumber: '202501050002',
          createTime: '2025-01-05 11:15',
          product: {
            name: '智能手表 Series 6',
            spec: '颜色: 银色 | 数量: 1',
            price: '1299',
            image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=60&h=60&fit=crop'
          },
          customer: {
            name: '李女士',
            address: '上海市浦东新区...'
          }
        }
      ],

      unpaidOrders: [
        {
          orderNumber: '202501050003',
          createTime: '2025-01-05 12:20',
          product: {
            name: '便携充电宝 20000mAh + 数据线套装',
            spec: '颜色: 白色 | 数量: 3',
            price: '267',
            image: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=60&h=60&fit=crop'
          },
          customer: {
            name: '王先生'
          },
          paymentTimeLeft: '23:45:30'
        }
      ],

      shippedOrders: [
        {
          orderNumber: '202501050004',
          createTime: '2025-01-04 15:30',
          product: {
            name: '无线键盘鼠标套装',
            spec: '颜色: 黑色 | 数量: 1',
            price: '159',
            image: 'https://images.unsplash.com/photo-1585298723682-7115561c51b7?w=60&h=60&fit=crop'
          },
          customer: {
            name: '赵女士'
          },
          logistics: '顺丰速运 SF1234567890'
        }
      ],

      serviceOrders: [
        {
          orderNumber: '202501040008',
          createTime: '2025-01-04 09:15',
          product: {
            name: '蓝牙音箱运动版',
            spec: '颜色: 蓝色 | 数量: 1',
            price: '299',
            image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=60&h=60&fit=crop'
          },
          customer: {
            name: '刘先生'
          },
          serviceReason: '商品质量问题'
        }
      ]
    }
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },

    switchTab(tabKey) {
      this.currentTab = tabKey
    },

    getStatusClass(status) {
      const statusMap = {
        'pending': 'pending-badge',
        'unpaid': 'unpaid-badge',
        'shipped': 'shipped-badge',
        'service': 'service-badge'
      }
      return statusMap[status] || 'pending-badge'
    },

    getStatusText(status) {
      const statusMap = {
        'pending': '待发货',
        'unpaid': '待付款',
        'shipped': '已发货',
        'service': '售后中'
      }
      return statusMap[status] || '待发货'
    },

    getCustomerExtra(order) {
      if (order.status === 'unpaid') {
        return `剩余支付时间: ${order.paymentTimeLeft}`
      } else if (order.status === 'shipped') {
        return `快递: ${order.logistics}`
      } else if (order.status === 'service') {
        return `申请原因: ${order.serviceReason}`
      } else {
        return `地址: ${order.customer.address}`
      }
    },

    getCustomerExtraClass(status) {
      if (status === 'unpaid') return 'payment-reminder'
      if (status === 'shipped') return 'logistics-info'
      if (status === 'service') return 'service-reason'
      return 'customer-address'
    },

    getActionButtonText(status) {
      const actionMap = {
        'pending': '立即发货',
        'unpaid': '提醒付款',
        'shipped': '确认收货',
        'service': '处理售后'
      }
      return actionMap[status] || '立即发货'
    },

    getActionButtonClass(status) {
      const classMap = {
        'pending': 'ship-button',
        'unpaid': 'remind-button',
        'shipped': 'confirm-button',
        'service': 'handle-button'
      }
      return classMap[status] || 'ship-button'
    },

    handleOrderAction(order) {
      switch (order.status) {
        case 'pending':
          this.shipOrder(order.orderNumber)
          break
        case 'unpaid':
          this.remindPayment(order.orderNumber)
          break
        case 'shipped':
          this.confirmDelivery(order.orderNumber)
          break
        case 'service':
          this.handleService(order.orderNumber)
          break
      }
    },

    viewOrderDetail(orderNumber) {
      uni.navigateTo({
        url: `/pages/order/detail/detail?id=${orderNumber}`
      })
    },

    shipOrder(orderNumber) {
      uni.showModal({
        title: '确认发货',
        content: `确认发货订单 ${orderNumber} 吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '订单已标记为发货状态',
              icon: 'success'
            })
          }
        }
      })
    },

    remindPayment(orderNumber) {
      uni.showModal({
        title: '提醒付款',
        content: `向买家发送付款提醒？\n订单号: ${orderNumber}`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '付款提醒已发送',
              icon: 'success'
            })
          }
        }
      })
    },

    confirmDelivery(orderNumber) {
      uni.showModal({
        title: '确认收货',
        content: `确认买家已收货？\n订单号: ${orderNumber}`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '订单已确认收货',
              icon: 'success'
            })
          }
        }
      })
    },

    trackOrder(orderNumber) {
      uni.navigateTo({
        url: `/pages/order/logistics/logistics?id=${orderNumber}`
      })
    },

    handleService(orderNumber) {
      uni.navigateTo({
        url: `/pages/order/service/service?id=${orderNumber}`
      })
    },

    showFilterModal() {
      this.showFilter = true
    },

    hideFilterModal() {
      this.showFilter = false
    },

    toggleStatusFilter(value) {
      const index = this.selectedFilters.status.indexOf(value)
      if (index > -1) {
        this.selectedFilters.status.splice(index, 1)
      } else {
        this.selectedFilters.status.push(value)
      }
    },

    selectTimeRange(range) {
      this.selectedTimeRange = this.selectedTimeRange === range ? '' : range
    },

    selectAmountRange(range) {
      this.selectedAmountRange = this.selectedAmountRange === range ? '' : range
    },

    resetFilters() {
      this.selectedFilters.status = []
      this.selectedTimeRange = ''
      this.selectedAmountRange = ''
      this.hasActiveFilters = false
    },

    applyFilters() {
      const hasFilters = this.selectedFilters.status.length > 0 ||
                        this.selectedTimeRange ||
                        this.selectedAmountRange

      this.hasActiveFilters = hasFilters

      if (hasFilters) {
        uni.showToast({
          title: '筛选已应用',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '显示全部订单',
          icon: 'none'
        })
      }

      this.hideFilterModal()
    }
  }
}
</script>

<style>
.container {
  background-color: #f3f4f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.header {
  background: linear-gradient(to right, #4f46e5, #9333ea);
  padding: 24rpx 32rpx;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.back-button, .filter-button {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.back-icon, .filter-icon {
  font-size: 36rpx;
  color: white;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
}

.filter-indicator {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #ef4444;
  border-radius: 50%;
}

/* Tab Section */
.tab-section {
  background-color: white;
  border-bottom: 2rpx solid #e5e7eb;
  padding: 16rpx 32rpx;
}

.tab-scroll {
  width: 100%;
}

.tab-container {
  display: flex;
  gap: 32rpx;
  white-space: nowrap;
}

.tab-button {
  padding-bottom: 16rpx;
  font-size: 28rpx;
  position: relative;
  flex-shrink: 0;
}

.tab-active {
  color: #ea580c;
  font-weight: 500;
  border-bottom: 4rpx solid #ea580c;
}

.tab-inactive {
  color: #6b7280;
}

/* Order List */
.order-list {
  flex: 1;
  background-color: white;
}

.tab-content {
  background-color: white;
}

.order-item {
  background-color: white;
  border-bottom: 2rpx solid #f3f4f6;
}

.order-header {
  padding: 24rpx 32rpx;
  border-bottom: 2rpx solid #f9fafb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-info {
  display: flex;
  align-items: center;
}

.order-number {
  font-size: 24rpx;
  color: #6b7280;
  margin-right: 16rpx;
}

.order-time {
  font-size: 24rpx;
  color: #9ca3af;
}

/* Status Badges */
.status-badge {
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.pending-badge {
  background-color: #fed7aa;
  color: #ea580c;
}

.unpaid-badge {
  background-color: #fecaca;
  color: #dc2626;
}

.shipped-badge {
  background-color: #dbeafe;
  color: #2563eb;
}

.service-badge {
  background-color: #e9d5ff;
  color: #9333ea;
}

/* Order Content */
.order-content {
  padding: 24rpx 32rpx;
}

.product-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  margin-right: 24rpx;
}

.product-details {
  flex: 1;
}

.product-name {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
  color: #374151;
}

.product-spec {
  display: block;
  font-size: 24rpx;
  color: #6b7280;
  margin-bottom: 8rpx;
}

.product-price {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #374151;
}

/* Order Footer */
.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  border-top: 2rpx solid #f3f4f6;
}

.customer-info {
  flex: 1;
}

.customer-name {
  display: block;
  font-size: 24rpx;
  color: #6b7280;
  margin-bottom: 4rpx;
}

.customer-address {
  display: block;
  font-size: 24rpx;
  color: #6b7280;
}

.payment-reminder {
  display: block;
  font-size: 24rpx;
  color: #dc2626;
}

.logistics-info {
  display: block;
  font-size: 24rpx;
  color: #2563eb;
}

.service-reason {
  display: block;
  font-size: 24rpx;
  color: #9333ea;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;
}

.detail-button {
  background-color: #dbeafe;
  color: #2563eb;
  font-size: 22rpx;
  padding: 10rpx 16rpx;
  border-radius: 12rpx;
  border: 2rpx solid #bfdbfe;
}

.ship-button {
  background-color: #ea580c;
  color: white;
  font-size: 24rpx;
  padding: 12rpx 24rpx;
  border-radius: 16rpx;
}

.remind-button {
  background-color: #2563eb;
  color: white;
  font-size: 24rpx;
  padding: 12rpx 24rpx;
  border-radius: 16rpx;
}

.track-button {
  background-color: #dbeafe;
  color: #2563eb;
  font-size: 22rpx;
  padding: 10rpx 16rpx;
  border-radius: 12rpx;
  border: 2rpx solid #bfdbfe;
}

.confirm-button {
  background-color: #16a34a;
  color: white;
  font-size: 22rpx;
  padding: 10rpx 16rpx;
  border-radius: 12rpx;
}

.handle-button {
  background-color: #9333ea;
  color: white;
  font-size: 24rpx;
  padding: 12rpx 24rpx;
  border-radius: 16rpx;
}

.list-bottom {
  height: 64rpx;
}

/* Filter Modal */
.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.filter-content {
  background-color: white;
  border-radius: 48rpx 48rpx 0 0;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  margin-top: auto;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 2rpx solid #e5e7eb;
}

.filter-title {
  font-size: 36rpx;
  font-weight: 600;
}

.close-button {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 32rpx;
  color: #6b7280;
}

.filter-body {
  max-height: calc(80vh - 240rpx);
  padding: 32rpx;
}

.filter-section {
  margin-bottom: 48rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 24rpx;
  display: block;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.checkbox-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 16rpx;
}

.checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #d1d5db;
  border-radius: 4rpx;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: white;
}

.checkbox.checked {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.checkbox-label {
  font-size: 28rpx;
}

.time-buttons, .amount-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.time-button, .amount-button {
  padding: 16rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 16rpx;
  text-align: center;
  font-size: 28rpx;
}

.time-button.active, .amount-button.active {
  background-color: #dbeafe;
  border-color: #3b82f6;
  color: #2563eb;
}

.filter-footer {
  display: flex;
  gap: 24rpx;
  padding: 16rpx 32rpx 40rpx;
  border-top: 2rpx solid #e5e7eb;
}

.reset-button {
  flex: 1;
  background-color: #f3f4f6;
  color: #374151;
  padding: 24rpx;
  border-radius: 16rpx;
  font-weight: 500;
  text-align: center;
  font-size: 28rpx;
}

.apply-button {
  flex: 1;
  background: linear-gradient(to right, #4f46e5, #9333ea);
  color: white;
  padding: 24rpx;
  border-radius: 16rpx;
  font-weight: 500;
  text-align: center;
  font-size: 28rpx;
}

/* FontAwesome Icons */
.fas {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}
</style>